<template>
  <div v-show="show" class="mask">
    <div class="container">
      <div class="print-btn close" @click="show = false">
        <i class="iconfont icon-guanbi" />
        <span>关闭</span>
      </div>
      <div v-print="printOption" class="print-btn print">
        <i class="iconfont icon-dayin" />
        <span>打印</span>
      </div>
      <div id="print" style="background-color: aqua;">
        <div id="payment-document-print" class="page">
          <div class="head">
            <p class="title">县总调度室督查问题督办单</p>
            <p class="date">安（创建）督字【{{ info.from.year }}】 {{ info.from.no }}号 </p>
          </div>
          <div class="content">
            <table border="1" width="100%" style="border-collapse:collapse"><!--需合并表格边框-->
              <tr>
                <td style="width: 10px; padding: 20px;" class="center bold">曝<br><br>光<br><br>问<br><br>题</td>
                <td colspan="5"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ info.from.problem }}</td>
              </tr>
              <tr>
                <td width="50" class="center bold">问题<br><br> 来源</td>                <!--跨2行-->
                <td width="50" class="center">{{ info.event.souce?dict.event_souce.find(i=>i.value== info.event.souce).label :'-' }}</td> <!--跨2列-->
                <td width="50" class="center bold">下派时间</td>    <!--跨2行-->
                <td width="50" class="center">{{ parseTime(info.from.dispatchTime,'{m}月{d}日') }}</td><!--跨2列-->
                <td width="50" class="center bold">整改时限</td>    <!--跨2行-->
                <!-- <td width="50" class="center">{{ info.from.deadline }}个工作日</td> -->
                <td width="50" class="center">{{ parseTime(info.from.rectificationTime,'{m}月{d}日') }}</td>
              </tr>
              <tr>
                <td class="center bold">责任<br><br>单位</td>
                <td colspan="2" class="center">{{ info.rpUnit }}</td>
                <td class="center bold">责任领导</td>
                <td colspan="2" class="center">{{ info.rpPerson }}</td>
              </tr>
              <tr>
                <td class="center bold">整改<br><br>要求</td>  <!--跨2列-->
                <td colspan="5">
                  <!-- <pre class="ask">
    1.各单位一把手要亲自研究、亲自部署，确保所发
现的问题能按要求整改到位。
    2.下发的问题每个扣 {{ info.event.deductionPoints }}分，同一问题经一次督办
未整改到位的，考核时扣 {{ info.event.deductionPoints*2 }} 分。同一问题经两次督办
仍未整改到位的，移交给县纪委监委问责。
    3.请责任单位在{{parseTime(info.from.rectificationTime,'{m}月{d}日')}}下午5 点前将上述问题
整改到位，并以图片加文字说明（单位一把手签字，盖
单位公章）的形式回复我办。 </pre> -->
                  <pre v-if="info.event.souce==1||info.event.souce==3||info.event.souce==6" class="ask">
    1.各单位一把手要亲自研究、亲自部署，确保所发
现的问题能按要求整改到位。
    2.市级下发的问题每个扣0.2分，经督办后未整改
到位的加一倍扣分；经两次督办仍未整改到位的加两倍
扣分。造成重大影响，追究相关责任，并由县委领导约
谈责任单位主要领导。
    3.请责任单位在{{ parseTime(info.from.rectificationTime,'{m}月{d}日') }}24点前将上述问题整
改到位，并以图片形式回复我办。 </pre>
                  <pre v-else class="ask">
    1.各单位一把手要亲自研究、亲自部署，确保所发
现的问题能按要求整改到位。
    2.督查发现的问题，每个静态问题扣0.1分，对发
现问题督办后未整改到位的加一倍扣分；经两次督办而
未整改到位的，加两倍扣分。造成重大影响，追究相关
责任，并由县委领导约谈责任单位主要领导。
    3.请责任单位在{{ parseTime(info.from.rectificationTime,'{m}月{d}日') }}24点前将上述问题整
改到位，并以图片形式回复我办。 </pre>
                </td>       <!--跨4列-->
              </tr>
            </table>
            <div class="mt20">抄报：{{ info.userName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//   import { findPayOrderDetailInfo } from '@/api/costManage'
// import { priceUppercase } from '@/utils/index'
// import _ from 'lodash'
import crudTEvent from '@/api/system/tEvent'
import { presenter } from '@crud/crud'

export default {
  name: 'LeaveDialog',
  dicts: ['event_souce'],
  mixins: [presenter()],
  data() {
    return {
      detail: {},
      show: false,
      printOption: {
        id: 'print', // 打印元素的id 不需要携带#号
        popTitle: '&nbsp;', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: '' // 头部文字 默认空
      },
      row: {},
      detailInfo: {
        detailList: [],
        costDetailList: [],
        payTypeStr: ''
      },
      listLoading: false,
      info: {}
    }
  },
  watch: {
    show(val) {
      if (val) {
        document.body.style.overflow = 'hidden'
        document.body.style.height = '100%'
      } else {
        document.body.style.overflow = 'inherit'
        document.body.style.height = 'auto'
      }
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  methods: {
    close() {
      this.show = false
    },
    open(item) {
      this.row = item
      this.show = true
      crudTEvent.selectSuperForm({ id: item.id }).then((res) => {
        this.info = res
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .mask {
    position: fixed;
    overflow: auto;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .container {
      position: absolute;
      color: #666;
      top: 70px;
      .print-btn {
        border-radius: 18px;
        position: absolute;
        right: -100px;
        font-size: 14px;
        padding: 9px 18px;
        display: flex;
        align-items: center;
        cursor: pointer;
        span {
          margin-left: 5px;
        }
        &.close {
          background-color: #fff;
          i {
            font-size: 13px;
          }
        }
        &.print {
          background-color: #ff7c24;
          color: #fff;
          top: 47px;
        }
      }
    }
  }
  #payment-document-print.page {
    background-color: #ffffff;
    width: 700px;
    // min-height: 842px;
    padding: 34px 40px;
    .head {
      text-align: center;
      .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        color: red;
      }
      .date {
        font-size: 20px;
      }
    }
    .ask{
        font-size: 22px;
        padding: 0;
        margin: -5px 0 0 5px;
        line-height: 35px;
        color: #000;
    }
    .line {
      border-bottom: 1px solid #666;
      height: 1px;
      margin: 20px 0;
    }
    .content {
      .title {
        font-size: 14px;
        font-weight: bold;
      }
      .mt20 {
        margin-top: 20px;
        margin-bottom: 12px;
        font-size: 20px;
        letter-spacing: 3px;
      }
    }
    table td{
      font-size: 20px;
      padding: 20px 5px;
    }
    table td.center{
      padding: 20px 0;
      text-align: center;
    }
    table td.bold{
      font-weight: bold;
      padding: 10px;
    }
  }
  @media print {
    @page {
      size: auto;
      color: auto;
    }
    body,
    html {
      height: auto !important;
    }
  }
  </style>

